import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Layout, Menu, theme } from 'antd';
import {
  DashboardOutlined,
  DatabaseOutlined,
  FileSearchOutlined,
  BarChartOutlined,
  SettingOutlined,
  UploadOutlined,
  ToolOutlined
} from '@ant-design/icons';
import './App.css';

// 页面组件
import Dashboard from './pages/Dashboard';
import DataUpload from './pages/DataUpload';
import FeaturesPage from './pages/FeaturesPage';
import JobsPage from './pages/JobsPage';
import EvaluationPage from './pages/EvaluationPage';
import ModelsPage from './pages/ModelsPage';
import TrainingPage from './pages/TrainingPage';

const { Header, Sider, Content } = Layout;

function App() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
          <div className="logo" style={{ height: '32px', margin: '16px', background: 'rgba(255, 255, 255, 0.2)' }} />
          <Menu
            theme="dark"
            defaultSelectedKeys={['1']}
            mode="inline"
          >
            <Menu.Item key="1" icon={<DashboardOutlined />}>
              <Link to="/">仪表盘</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<UploadOutlined />}>
              <Link to="/upload">数据上传</Link>
            </Menu.Item>
            <Menu.Item key="3" icon={<ToolOutlined />}>
              <Link to="/features">特征工程</Link>
            </Menu.Item>
            <Menu.Item key="4" icon={<FileSearchOutlined />}>
              <Link to="/training">模型训练</Link>
            </Menu.Item>
            <Menu.Item key="5" icon={<BarChartOutlined />}>
              <Link to="/evaluation">模型评估</Link>
            </Menu.Item>
            <Menu.Item key="6" icon={<SettingOutlined />}>
              <Link to="/models">模型管理</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }} />
          <Content style={{ margin: '24px 16px', padding: 24, background: colorBgContainer, borderRadius: borderRadiusLG }}>
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/upload" element={<DataUpload />} />
              <Route path="/features" element={<FeaturesPage />} />
              <Route path="/training" element={<TrainingPage />} />
              <Route path="/evaluation" element={<EvaluationPage />} />
              <Route path="/models" element={<ModelsPage />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

export default App;
